﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<title>Gallery Test Page</title>

	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/Javascript" ></script>
	<script src="fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
	<script src="script/accordion.js" type="text/Javascript"></script>

	<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="css/main.css" type="text/css" />

	<script type="text/javascript">
		$(document).ready(function () {
			// Get the width of each thumbnail
			var imageWidth = $("#scroller img:first").width();

			// Get the total number of images
			var imageCount = $("#scroller img").size();

			// Optional params to set how to turn on/off the scroll buttons
			var opts = {
				leftClickHide : function () { $("#leftScroller").removeClass("leftArrow") },
				leftClickShow : function () { $("#leftScroller").addClass("leftArrow") },
				rightClickHide: function () { $("#rightScroller").removeClass("rightArrow") },
				rightClickShow: function () { $("#rightScroller").addClass("rightArrow") }
			};

			var accordion = new Accordion("#leftScroller", "#rightScroller", "#scroller", imageWidth, imageCount, 5, opts);

			// Setup the onclick event
			$("#scroller a").fancybox();
		});
	</script>
</head>
<body>
	<h1>Test Gallery</h1>

	<div id="gallery">
		<div id="leftScroller" class="leftArrow"></div>
		<div id="scrollerContainer">
			<ul id="scroller">
				<li><a href="images/galleryswstonehenge01.jpg"><img src="images/galleryswstonehenge01_tn.jpg" /></a></li>
				<li><a href="images/galleryswstonehenge02.jpg"><img src="images/galleryswstonehenge02_tn.jpg" /></a></li>
				<li><a href="images/galleryswstonehenge03.jpg"><img src="images/galleryswstonehenge03_tn.jpg" /></a></li>
				<li><a href="images/galleryswstonehenge04.jpg"><img src="images/galleryswstonehenge04_tn.jpg" /></a></li>
				<li><a href="images/galleryswstonehenge06.jpg"><img src="images/galleryswstonehenge06_tn.jpg" /></a></li>
				<li><a href="images/galleryswstonehenge09.jpg"><img src="images/galleryswstonehenge09_tn.jpg" /></a></li>
				<li><a href="images/galleryswstonehenge11.jpg"><img src="images/galleryswstonehenge11_tn.jpg" /></a></li>
				<li><a href="images/galleryswstonehenge12.jpg"><img src="images/galleryswstonehenge12_tn.jpg" /></a></li>
				<li><a href="images/galleryswstonehenge13.jpg"><img src="images/galleryswstonehenge13_tn.jpg" /></a></li>
				<li><a href="images/galleryswstonehenge14.jpg"><img src="images/galleryswstonehenge14_tn.jpg" /></a></li>
				<li><a href="images/galleryswstonehenge17.jpg"><img src="images/galleryswstonehenge17_tn.jpg" /></a></li>
				<li><a href="images/galleryswstonehenge01.jpg"><img src="images/galleryswstonehenge01_tn.jpg" /></a></li>
				<li><a href="images/galleryswstonehenge02.jpg"><img src="images/galleryswstonehenge02_tn.jpg" /></a></li>
				<li><a href="images/galleryswstonehenge03.jpg"><img src="images/galleryswstonehenge03_tn.jpg" /></a></li>
				<li><a href="images/galleryswstonehenge04.jpg"><img src="images/galleryswstonehenge04_tn.jpg" /></a></li>
				<li><a href="images/galleryswstonehenge06.jpg"><img src="images/galleryswstonehenge06_tn.jpg" /></a></li>
				<li><a href="images/galleryswstonehenge09.jpg"><img src="images/galleryswstonehenge09_tn.jpg" /></a></li>
				<li><a href="images/galleryswstonehenge11.jpg"><img src="images/galleryswstonehenge11_tn.jpg" /></a></li>
				<li><a href="images/galleryswstonehenge12.jpg"><img src="images/galleryswstonehenge12_tn.jpg" /></a></li>
				<li><a href="images/galleryswstonehenge13.jpg"><img src="images/galleryswstonehenge13_tn.jpg" /></a></li>
				<li><a href="images/galleryswstonehenge14.jpg"><img src="images/galleryswstonehenge14_tn.jpg" /></a></li>
				<li><a href="images/galleryswstonehenge17.jpg"><img src="images/galleryswstonehenge17_tn.jpg" /></a></li>
			</ul>
		</div>
		<div id="rightScroller" class="rightArrow"></div>
	</div>
</body>
</html>
